{% if isFramework("vue") %}
### Cell Component Function

Instead of using a Vue component, it's possible to use a function for a Cell Component.

This is useful if you have a String value to render and want to avoid the overhead of a Vue component.

In the example below we're outputting a string value that depends on the cell value:
{% /if %}

{% if isFramework("vue") %}
```js
<template>
    <ag-grid-vue :columnDefs="columnDefs" ...other properties>
    </ag-grid-vue>
</template>

<script>
//...other imports
import {AgGridVue} from "ag-grid-vue3";

export default {
    components: {
        AgGridVue
    },
    data() {
        return {
            columnDefs: [
                {
                    headerName: "Value",
                    field: "value",
                    cellRenderer: params => params.value > 1000 ? "LARGE VALUE" : "SMALL VALUE"
                }
            ]
        }
    }
    //...
}
</script>
```
{% /if %}

{% if isFramework("vue") %}
It is also possible to write a JavaScript-based Cell Component - refer to the [docs here](/javascript-data-grid/component-cell-renderer/#cell-component-function) for more information
{% /if %}
